<header class="header white-bg">
    <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
    </div>
    <!--logo start-->
    <a href="index.html" class="logo" style="width: 130px;"><span>{:config('web_name')}</span></a>
    <!--logo end-->
    <div class="nav notify-row" id="top_menu" style="margin-left: 35px;">
        <!--  notification start -->
        <ul class="nav top-menu">
            <!-- inbox dropdown start-->
            <li id="header_inbox_bar" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge bg-important">{$message_look}</span>
                </a>
                <ul class="dropdown-menu extended inbox">
                    <div class="notify-arrow notify-arrow-red"></div>
                    <li>
                        <p class="red">我的消息</p>
                    </li>
                    {volist name="message_list" id="message"}
                    <li>
                        <a onclick="loadMessage('{$message.id}');">
                            <span class="photo"><img alt="avatar"
                                                     src="http://q1.qlogo.cn/g?b=qq&nk={$message.qq}&s=160"></span>
                                    <span class="subject">
                                    <span class="from">{if condition="!$message.islook"} <span class="text text-danger">[未读]</span>{else/}<span
                                            class="text text-success">[已读]</span>{/if}</span>
                                    <span class="time">
                                        {$message.addtime}
                                    </span>
                                    </span>
                                    <span class="message"
                                          style="display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                        {$message.title}
                                    </span>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </li>
            <!-- inbox dropdown end -->
            <!-- notification dropdown start-->
            <li id="header_notification_bar" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge bg-warning">0</span>
                </a>
                <ul class="dropdown-menu extended notification">
                    <div class="notify-arrow notify-arrow-yellow"></div>
                    <li>
                        <p class="yellow">You have 0 new notifications</p>
                    </li>
                </ul>
            </li>
            <!-- notification dropdown end -->
        </ul>
        <!--  notification end -->
    </div>
    <div class="top-nav ">
        <!--search & user info start-->
        <ul class="nav pull-right top-menu">
            <!-- user login dropdown start-->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <img alt="" src="http://q1.qlogo.cn/g?b=qq&nk={$userInfo.qq}&s=160" width="29">
                    <span class="username">{$userInfo.user}</span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu extended logout">
                    <div class="log-arrow-up"></div>
                    <li><a href="{:url('profile')}"><i class=" fa fa-user"></i>个人信息</a></li>
                    <li><a href="{:url('index')}"><i class="fa fa-home"></i> 会员中心</a></li>
                    {if condition="$userInfo.power eq 9"}
                    <li><a href="{:url('index/Admin/index')}"><i class="fa fa-bell-o"></i> 管理后台</a></li>
                    {/if}
                    <li><a href="{:url('index/Index/logout')}"
                           onclick="return confirm('确认退出登录？');"><i class="fa fa-key"></i> 注销登录</a></li>
                </ul>
            </li>
            <!-- user login dropdown end -->
        </ul>
        <!--search & user info end-->
    </div>
</header>
<div id="modal-message" class="modal fade bg-info">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title text-info">我的消息</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-info">
                    <div class="panel-heading" id="message-title">加载中，请稍后...</div>
                    <div class="panel-body text-info" style="    background: #efefef;">
                        <div id="message-message"></div>
                        <div class="text-right" id="message-user"></div>
                        <div class="text-right" id="message-addtime"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    function loadMessage(id) {
        $.post("{:url('Ajax/message')}", {id: id}, function (json) {
            if (json.code == 0) {
                $("#message-title").text(json.message.title);
                $("#message-message").html(json.message.message);
                $("#message-user").text("From：" + json.message.user + "[UID:" + json.message.fid + "]");
                $("#message-addtime").html(json.message.addtime);
                $("#modal-message").modal("show");
            } else {
                alert("加载消息失败！");
            }
        }, 'json');
    }
    {if condition="$forceId gt 0"}
    loadMessage({$forceId});
    {/if}
</script>